<template>
    <div class="x-handle"
         @mousedown="mouseDown"
         :style="{background:theme.color.slide}"
    ></div>
</template>

<script setup lang="ts">

import {onDeactivated, onMounted, ref} from "vue";
import {useThemeStore} from "../../store/theme";

const emits=defineEmits({
  widthChange:function (value) {

  }
})

const theme=useThemeStore()

const Width=ref(2)
const lastX=ref()
onMounted(()=>{
  document.addEventListener("mouseup", mouseUp);
})

onDeactivated(()=>{
  document.removeEventListener("mouseup", mouseUp)
})

function mouseDown(event) {
  document.addEventListener("mousemove", mouseMove);
  lastX.value = event.screenX;
}
function mouseMove(event) {
  emits("widthChange", lastX.value - event.screenX);
  lastX.value = event.screenX;
}
function mouseUp() {
  lastX.value = "";
  document.removeEventListener("mousemove", mouseMove);
}
function mouseOver() {
  Width.value=3
}
function mouseLeave() {
  Width.value=2
}

/*export default {
    name: "Slide",
    data() {
        return {
            lastX: "",
            Width:2,
        };
    },

    created() {
        document.addEventListener("mouseup", this.mouseUp);
    },

    destroyed() {
        document.removeEventListener("mouseup", this.mouseUp);
    },

    methods: {
        mouseDown(event) {
            document.addEventListener("mousemove", this.mouseMove);
            this.lastX = event.screenX;
        },
        mouseMove(event) {
            this.$emit("widthChange", this.lastX - event.screenX);
            this.lastX = event.screenX;
        },
        mouseUp() {
            this.lastX = "";
            document.removeEventListener("mousemove", this.mouseMove);
        },
        mouseOver() {
          this.Width=3
        },
        mouseLeave() {
            this.Width=2
        }
    }
}*/
</script>

<style scoped>
.x-handle {
    width: 2px;
    cursor: w-resize;
    z-index: 10;
    background: #b0b4af;
}
</style>